<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>WebOffice</title>
</head>

<body>
  <script src="./web-office-sdk-solution-v2.0.2.umd.js">
  </script>
  <script>
    console.log('引入后可以开始使用 jssdk 了！')
    console.log(WebOfficeSDK)



    window.onload = async () => {


      const instance = WebOfficeSDK.init({
        officeType: WebOfficeSDK.OfficeType.Writer,
        appId: 'SX20230607SAIWEY',
        fileId: 'ce8251a609b942f9bf2bff5d63277969',
        mode: 'simple',
        mount: '#weboffice',
        wpsOptions: {
          isShowDocMap: false, // 是否开启目录功能，默认开启
          isBestScale: true // 打开文档时，默认以最佳比例显示
        }
      })
      await instance.ready()
      const app = instance.Application

      console.log({app})


      // 书签对象
      const bookmarks = await app.ActiveDocument.Bookmarks

      // 添加书签
      await bookmarks.Add({
        Name: 'WebOffice',
        Range: {
          Start: 1,
          End: 10
        }
      })


      // 1. 搜索并高亮文本
      const findResult = await app.ActiveDocument.Find.Execute('WebOffice')

      // 2. 取消搜索结果高亮
      await app.ActiveDocument.Find.ClearHitHighlight()

      // 3. 获取位置信息
      const {pos} = findResult[0]

      document
        .querySelector(".input1")
        .addEventListener("input", async (e) => {
          // 内容控件对象
          const contentControls = await app.ActiveDocument.ContentControls

          // 获取第 1 个内容控件
          const contentControl = await contentControls.Item(1)

          // 获取第 1 个内容控件的范围
          const range = await contentControl.Range

          // 获取第 1 个内容控件的文本
          const text = range.Text
          console.log(text)

          // 设置第 1 个内容控件的文本
          range.Text = e.target.value
        });

    }




  </script>
</body>

</html>
